<script setup>
import request from '@/utils/request'
import dayjs from 'dayjs'
import { showToast } from '@nutui/nutui'
import { useLoginUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
const router = useRouter()

const { loginUserInfo } = storeToRefs(useLoginUserStore())
//顶部导航栏右侧按钮
const onClick = () => {
  router.push('/user/UserCenter/attendanceRecord')
  console.log('[Navbar]: on click right')
}
//时间组件
import { ref } from 'vue'

const currentDate = ref('')
const currentTime = ref('')

// 更新当前日期和时间
const updateDateTime = () => {
  const now = new Date()
  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' }
  const timeOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric' }

  currentDate.value = now.toLocaleDateString(undefined, dateOptions)
  currentTime.value = now.toLocaleTimeString(undefined, timeOptions)
}

// 初始加载时更新日期和时间
updateDateTime()

// 每隔一秒更新日期和时间
setInterval(updateDateTime, 1000)

const clockIn = () => {
  request({
    url: 'https://restapi.amap.com/v3/ip',
    method: 'get',
    params: {
      key: '57cac9d92dd4d33b55b48181390df7fb'
    }
  }).then((res) => {
    console.log(res)
    let data = res.rectangle.split(';')
    request({
      url: 'https://restapi.amap.com/v3/geocode/regeo',
      method: 'get',
      params: {
        key: '57cac9d92dd4d33b55b48181390df7fb',
        location: data[0],
        radius: '1'
      }
    }).then((res) => {
      console.log(res)
      address.value = res.regeocode.formatted_address
      request({
        url: '/punchingCardRecord/clockIn',
        method: 'get',
        params: {
          userId: loginUserInfo.value.id,
          address: address.value
        }
      }).then((res) => {
        if (res.code == 0) {
          getLowclock()
          showToast.success('打卡成功')
        }
      })
    })
  })
}
const lowData = ref({
  time: '',
  status: 0
})
const getLowclock = () => {
  request({
    url: '/punchingCardRecord/todayClockIn',
    method: 'get',
    params: {
      userId: loginUserInfo.value.id
    }
  }).then((res) => {
    lowData.value.status = res.data.isClockIn ? 1 : 0
    lowData.value.time = res.data.lastClockIn
    console.log(lowData.value)
  })
}
//调用函数获取昨日是否有打卡信息
getLowclock()

const address = ref('')
//高德地图相关函数
const currentLocation = ref('') // 当前位置信息

const getCurrentLocation = () => {
  request({
    url: 'https://restapi.amap.com/v3/ip',
    method: 'get',
    params: {
      key: '57cac9d92dd4d33b55b48181390df7fb'
    }
  }).then((res) => {
    console.log(res)
    let data = res.rectangle.split(';')
    request({
      url: 'https://restapi.amap.com/v3/geocode/regeo',
      method: 'get',
      params: {
        key: '57cac9d92dd4d33b55b48181390df7fb',
        location: data[0],
        radius: '1'
      }
    }).then((res) => {
      console.log(res)
      address.value = res.regeocode.formatted_address
    })
  })
}
</script>

<template>
  <div>
    <nut-navbar
      class="dingbudaohang"
      title="考勤"
      desc="查看签到记录"
      @click-right="onClick"
    ></nut-navbar>
  </div>
  <div>
    <nut-space direction="vertical" fill>
      <div>
        <div class="content">
          <div class="datetime">
            <p>当前日期：{{ currentDate }}</p>
            <p>当前时间：{{ currentTime }}</p>
          </div>
        </div>
      </div>
      <div class="zhuangtai">
        <h1 v-if="lowData.status == 0" class="status-text1">今日还未签到！</h1>
        <h1 v-else class="status-text2">今日已签到</h1>
      </div>

      <!-- 百度地图 -->
      <div>
        <!-- <baidu-map :ak="yourBaiduMapAK" :center="center" :zoom="zoom">
          <bm-marker :position="center"></bm-marker>
        </baidu-map> -->
        <button @click="getCurrentLocation">获取当前位置</button>
        <p>{{ address }}</p>
        <p v-if="currentLocation">{{ currentLocation }}</p>
        <!-- 展示当前位置信息 -->
      </div>

      <div class="zhuangtai">
        <button v-if="lowData.status == 0" @click="clockIn" class="learn-more">
          签到
        </button>
      </div>
      <div>
        <br />
        <br />
        <h3 class="qiandaoshijian">
          昨天签到时间：{{
            lowData.time
              ? dayjs(lowData.time).format('YYYY-MM-DD HH:mm:ss')
              : '昨日未打卡'
          }}
        </h3>
      </div>
    </nut-space>
  </div>
</template>

<style>
/* 签到时间 位置 */
.qiandaoshijian {
  margin-left: 15px;
}
/* 状态居中，可通用 */
.zhuangtai {
  text-align: center; /* 居中对齐 */
}

.status-text1 {
  color: red; /* 修改字体颜色 */
  font-size: 2em; /* 修改字体大小 */
}
.status-text2 {
  color: rgb(0, 227, 106); /* 修改字体颜色 */
  font-size: 2em; /* 修改字体大小 */
}

.dingbudaohang .nut-navbar {
  height: 60px; /* 设置导航栏的高度 */
}

.dingbudaohang .nut-navbar-title {
  font-size: 2em; /* 设置标题字体大小 */
}
/* 时间组件 */
.content {
  padding: 20px;
}

.datetime {
  font-size: 18px;
}

/* 按钮样式 */
button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-family: inherit;
  font-size: 30px;
}

button.learn-more {
  font-weight: 600;
  color: #382b22;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: #fff0f0;
  border: 2px solid #b18597;
  border-radius: 0.75em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition:
    background 150ms cubic-bezier(0, 0, 0.58, 1),
    -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
  transition:
    transform 150ms cubic-bezier(0, 0, 0.58, 1),
    background 150ms cubic-bezier(0, 0, 0.58, 1),
    -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}

button.learn-more::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9c4d2;
  border-radius: inherit;
  -webkit-box-shadow:
    0 0 0 2px #b18597,
    0 0.625em 0 0 #ffe3e2;
  box-shadow:
    0 0 0 2px #b18597,
    0 0.625em 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0.75em, -1em);
  transform: translate3d(0, 0.75em, -1em);
  transition:
    transform 150ms cubic-bezier(0, 0, 0.58, 1),
    box-shadow 150ms cubic-bezier(0, 0, 0.58, 1),
    -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1),
    -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

button.learn-more:hover {
  background: #ffe9e9;
  -webkit-transform: translate(0, 0.25em);
  transform: translate(0, 0.25em);
}

button.learn-more:hover::before {
  -webkit-box-shadow:
    0 0 0 2px #b18597,
    0 0.5em 0 0 #ffe3e2;
  box-shadow:
    0 0 0 2px #b18597,
    0 0.5em 0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0.5em, -1em);
  transform: translate3d(0, 0.5em, -1em);
}

button.learn-more:active {
  background: #ffe9e9;
  -webkit-transform: translate(0em, 0.75em);
  transform: translate(0em, 0.75em);
}

button.learn-more:active::before {
  -webkit-box-shadow:
    0 0 0 2px #b18597,
    0 0 #ffe3e2;
  box-shadow:
    0 0 0 2px #b18597,
    0 0 #ffe3e2;
  -webkit-transform: translate3d(0, 0, -1em);
  transform: translate3d(0, 0, -1em);
}
</style>
